<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
        body{
            background-color: rgba(221,217,217,1.00);
        }
        .box{
            width: 360px;
            height: 360px;
            line-height: 100vh;
            margin:200px auto;
            transform-style: preserve-3d;
            transform:translate(-50%,-50%);
            animation:move 10s ease-in-out infinite;

        }
        .box>div{
            width: 100%;
            height: 100%;
            opacity: 0.6;
            border:2px solid white;
            position:absolute;
            text-align: center;
            line-height: 350px;
        }
		.box>div:hover{
			background-color: rgba(0,0,0,.8);
			color: white
		}
        .front{
            background-color: indianred;
            transform:translateZ(-180px);
        }
        .back{
            background-color: hotpink;
            transform: translateZ(180px) rotateY(180deg);
        }
        .left{
            background-color: greenyellow;
            transform:translateX(-180px) rotateY(-90deg);

        }
        .right{
            background-color: skyblue;
            transform:translateX(180px) rotateY(90deg);
        }
        .top{
            background-color: purple;
            transform:translateY(-180px) rotateX(-90deg);
        }
        .bottom{
            background-color: blueviolet;
            transform:translateY(180px) rotateX(90deg);
        }
        @keyframes move{
            from{
                transform:rotateX(0) rotateY(0);
            }
            25%{
                transform:rotateX(90deg) rotateY(90deg);
            }
            50%{
                transform:rotateX(180deg) rotateY(180deg);
            }
            75%{
                transform:rotateX(270deg) rotateZ(90deg);
                
            }
            to{
                transform:rotateX(360deg) rotateZ(180deg);
            }
        }
    </style>
<body>
	<div class="box">
            <div class="front"> 前</div>
            <div class="back">后</div>
            <div class="right">右</div>
            <div class="left">左</div>
            <div class="top">上</div>
            <div class="bottom">下</div>
        </div>
</body>
</html>
